import 'package:english_words/english_words.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    // ChangeNotifierProvider 创建状态并将其提供给整个应用。这样一来，应用中的任何 widget 都可以获取状态。
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          // Color.fromARGB(255, 16, 247, 12)  Colors.deepOrange 或 Colors.red
          // 使用十六进制数，也可以使用 Color(0xFF00FF00)
          // 完全不透明的纯色 fromRGBO
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.green),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

// 定义应用的状态（管理应用状态）
// 定义应用运行所需的数据
// 状态类扩展 ChangeNotifier，这意味着它可以向其他人通知自己的更改。例如，如果当前单词对发生变化，应用中的一些 widget 需要知晓此变化。
// 之前《单页面功能》MyAppState 涵盖了您的所有状态需求。正是因此，您目前为止编写的所有 widget 都是无状态的。它们不包含任何自己的可变状态。所有 widget 都无法自行更改，而是必须经过 MyAppState。
class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
  void getNext() {
    current = WordPair.random();
    // 通知所有监听器，状态已更改。向任何通过 watch 方法跟踪 MyAppState 的对象发出通知。
    notifyListeners();
  }

  // 增加“收藏”
  var favorites = <WordPair>[];
  void toggleFavorite() {
    if (favorites.contains(current)) {
      favorites.remove(current);
    } else {
      favorites.add(current);
    }
    // 通知所有监听器，状态已更改。向任何通过 watch 方法跟踪 MyAppState 的对象发出通知。
    notifyListeners();
  }
}

// 将 MyHomePage 转换为有状态 widget。
class MyHomePage extends StatefulWidget {
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}
// 划线 (_) 将该类设置为私有类，并由编译器强制执行
class _MyHomePageState extends State<MyHomePage> {
  // 跟踪变量：selectedIndex
  var selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    Widget page;
    // 根据 selectedIndex 中的当前值，switch 语句为 page 分配一个屏幕。
    switch (selectedIndex) {
      case 0:
        page = GeneratorPage();
        break;
      case 1:
        // page = Placeholder(); // 交叉矩形，将界面的该部分标记为未完成。
        page = FavoritesPage();
        break;
      default:
        throw UnimplementedError('no widget for $selectedIndex');
    }
    // Builder 改为：LayoutBuilder
    // LayoutBuilder 构建一个 widget，该 widget 可以根据其父级提供的约束来调整大小。
    return LayoutBuilder(
      // LayoutBuilder 有两个参数：context, constraints
      builder: (context, constraints) {
        // Wrap with Builder 宽度自适应
        return Scaffold(
          body: Row(
            children: [
              // SafeArea 将确保其子项不会被硬件凹口或状态栏遮挡。在此应用中，widget 会将 NavigationRail 封装，以防止导航按钮被遮挡，例如被移动状态栏遮挡。
              // 侧边栏，不会被遮挡
              SafeArea(
                child: NavigationRail(
                  // extended: false 行更改为 true。这将显示图标旁边的标签。
                  // extended: false,
                  extended: constraints.maxWidth >= 600,  // 宽度自适应，当宽度大于等于 600 时，将显示图标旁边的标签。
                  destinations: [
                    NavigationRailDestination(
                      icon: Icon(Icons.home),
                      label: Text('Home'),
                    ),
                    NavigationRailDestination(
                      icon: Icon(Icons.favorite),
                      label: Text('Favorites'),
                    ),
                  ],
                  // 选择的索引
                  // selectedIndex: 0,
                  selectedIndex: selectedIndex, // 以变量赋值
                  // 当选择了一个 Destination 时，onDestinationSelected 将被调用。
                  onDestinationSelected: (value) {
                    // print('selected: $value');
                    // 当选择了某个 Destination，则更新 selectedIndex。
                    setState(() {
                      selectedIndex = value;
                    });
                  },
                ),
              ),
              // Expanded：展开的 widget 填充剩余空间,“贪婪的”元素
              Expanded(
                child: Container(
                  color: Theme.of(context).colorScheme.primaryContainer,
                  child: page,
                ),
              ),
            ],
          ),
        );
      }
    );
  }
}

class FavoritesPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    var favorList = appState.favorites;

    if (favorList.isEmpty) {
      return Center(
        child: Text('No favorites yet.'),
      );
    }
    
    return 
    // 可滚动列表
    ListView(
      children: [
        Padding(
          padding: const EdgeInsets.all(20),
          child: Text('You have ${favorList.length} favorites:'),
        ),
        for (var favor in favorList) 
          ListTile(
            leading: Icon(Icons.favorite),
            title: Text(favor.asLowerCase),
          ),
      ],
    );
  }
}

class GeneratorPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();
    var pair = appState.current;

    IconData icon;
    if (appState.favorites.contains(pair)) {
      icon = Icons.favorite;
    } else {
      icon = Icons.favorite_border;
    }

    // 手动提取到新页面。 MyHomePage 全部内容均被提取到新的 GeneratorPage widget,唯一未提取的部分是 Scaffold。
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          BigCard(wordPair: pair),
          SizedBox(height: 10),
          Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              ElevatedButton.icon(
                onPressed: () {
                  appState.toggleFavorite();
                },
                icon: Icon(icon),
                label: Text('Like'),
              ),
              SizedBox(width: 10),
              ElevatedButton(
                onPressed: () {
                  appState.getNext();
                },
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class BigCard extends StatelessWidget {
  const BigCard({
    super.key,
    required this.wordPair,
  });

  final WordPair wordPair;

  @override
  Widget build(BuildContext context) {
    // 获取主题
    final theme = Theme.of(context);
    // 获取文本样式
    // 创建新的文本样式，并使用 copyWith 方法来修改它
    // copyWith 方法允许您创建一个新样式，而不会修改原始样式。
    // 字体主题。此类包括以下成员：bodyMedium（针对中等大小的标准文本）、caption（针对图片的说明）或 headlineLarge（针对大标题）
    // 调用 displayMedium 上的 copyWith() 会返回文本样式的副本，以及您定义的更改。在本例中，您只是更改文本的颜色。
    final style = theme.textTheme.headlineMedium!.copyWith(
      color: theme.colorScheme.onPrimary,
    );

    return Card(
      elevation: 9,
      color: theme.colorScheme.primary,
      // 环绕padding widget，用 widget 环绕： Wrap with widget
      child: Padding(
        // 上下边距
        padding: const EdgeInsets.all(20.0),
        // child: Text(wordPair.asUpperCase),
        // 环绕text widget，用padding环绕： Wrap with Padding
        child: Text(
          wordPair.asLowerCase, 
          style: style,
          semanticsLabel: "${wordPair.first} ${wordPair.second}",
        ),
      ),
    );
  }
}
